<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>钟表</title>
		<style id="css">
			#wrap {
				width: 200px;
				height: 200px;
				border: 2px solid #000;
				margin: 100px auto;
				border-radius: 50%;
				position: relative;
			}

			#wrap ul {
				margin: 0;
				padding: 0;
				height: 200px;
				position: relative;
				list-style: none;
			}

			#wrap ul li {
				width: 2px;
				height: 6px;
				background: #000;
				position: absolute;
				left: 99px;
				top: 0;
				-webkit-transform-origin: center 100px;
			}

			#wrap ul li:nth-of-type(5n+1) {
				height: 12px;
			}

			#hour {
				width: 6px;
				height: 45px;
				background: #000;
				position: absolute;
				left: 97px;
				top: 55px;
				-webkit-transform-origin: bottom;
			}

			#min {
				width: 4px;
				height: 65px;
				background: #999;
				position: absolute;
				left: 98px;
				top: 35px;
				-webkit-transform-origin: bottom;
			}

			#sec {
				width: 2px;
				height: 80px;
				background: red;
				position: absolute;
				left: 99px;
				top: 20px;
				-webkit-transform-origin: bottom;
			}

			.icon {
				width: 20px;
				height: 20px;
				background: #000;
				border-radius: 50%;
				position: absolute;
				left: 90px;
				top: 90px;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<ul id="list">
				<li></li>


				<li></li>
			</ul>
			<div id="hour"></div>
			<div id="min"></div>
			<div id="sec"></div>
			<div class="icon"></div>
		</div>
		<script>
			var oList = document.getElementById("list"); //获取到刻度
			var oCss = document.getElementById("css");
			var oHour = document.getElementById("hour"); //获取时针
			var oMin = document.getElementById("min"); //获取分针
			var oSec = document.getElementById("sec"); //获取秒针
			var oLi = "";
			var sCss = "";
			for (var i = 0; i < 60; i++) { //一个表盘总共是60个刻度
				sCss += "#wrap ul li:nth-of-type(" + (i + 1) + "){-webkit-transform: rotate(" + i * 6 + "deg);}";
				oLi += "<li></li>";
			};
			oList.innerHTML = oLi;
			oCss.innerHTML += sCss; //表盘刻度渲染完成
			toTime();
			setInterval(toTime, 1000);

			function toTime() {
				var oDate = new Date(); //获取当前时间
				var iSec = oDate.getSeconds(); //获取当前秒
				var iMin = oDate.getMinutes() + iSec / 60; //获取当前分
				var iHour = oDate.getHours() + iMin / 60; //获取当前时
				oSec.style.WebkitTransform = "rotate(" + iSec * 6 + "deg)"; //秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
				oMin.style.WebkitTransform = "rotate(" + iMin * 6 + "deg)"; //分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
				oHour.style.WebkitTransform = "rotate(" + iHour * 30 + "deg)"; //时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
			};
		</script>
	</body>
</html>
